<template>
  <div class="city">
  <div class="nav">
<van-nav-bar
  title="城市列表"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="$router.go(-1)"
/></div>
<van-index-bar :index-list="getnewcitydata">
   <van-index-anchor index="#">当前城市</van-index-anchor>
 <van-cell :title="mycity"/>
  <van-index-anchor index="热">热门城市</van-index-anchor>
<van-cell :title="area.label" v-for="area in areahot" :key="area.value" @click="label(area.label)" />
<div class="anchor" v-for="item in getrendcityList" :key="item">

  <van-index-anchor :index="item" highlight-color="#21b97a">{{item}}</van-index-anchor>
   <van-cell :title="value" v-for="(value,index) in getcityList[item]" :key="index" @click="label(value)"/>

</div>

</van-index-bar>
  </div>
</template>

<script>
import { areaInfo, areahot } from '@/api/listItem'
import { dispose } from '@/utils/dispose'
import { setTokenID } from '@/utils/stroageid'

export default {
  data () {
    return {
      areahot: '',
      mycity: '',
      getnewcitydata: [],
      getcityList: {},
      getrendcityList: {}
    }
  },
  async created () {
    // 处理数据城市列表
    const data = await dispose()
    const { body } = await areahot()
    this.getnewcitydata = data.cityIndex
    this.getnewcitydata.unshift('#', '热')
    this.getcityList = data.cityList
    /* eslint-disable */
    this.getrendcityList = this.getnewcitydata.filter(item => {
      if (item !== '#' && item !== '热') {
        return item
      }
    })
    //
   this.mycity = localStorage.getItem('city')
   this.areahot = body
  },
  methods: {
    async label (value) {
      const data = await areaInfo(value)
      if (data.body.label !== value) return this.$toast.fail('此城市无房源')
      setTokenID(data.body.value)
      localStorage.setItem('city', value)
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
